<template>
    <div class="userInfo">
        <div class="user-set">
            <span class="user-fa" @click="$router.push('/home')">
                <i class="fa fa-chevron-left" aria-hidden="true"></i>
            </span>
            <span class="user-span">
                <i class="fa fa-check-square-o" aria-hidden="true"></i>
            </span>
            <p class="user-p">今天还没打卡哦</p>
            <span class="iconfont icon-shanchu user-ico"></span>
        </div>
        <!-- 个人头像 -->
        <div class="user-top">
            <div class="user-top-img">
                <img src="" alt="">
            </div>
            <div class="user-top-name">
                <p class="top-name">
                    我的名字
                </p>
                <p class="top-sex">
                    女 100 广东 广州
                </p>
                <p class="top-icon"></p>
            </div>
        </div>
        <!-- 关注 -->
        <div class="user-focus">
            <div class="focus-fan">
                <div class="focus-num">0</div>
                <div class="focus-txt">粉丝</div>
            </div>
            <div class="focus-fan">
                <div class="focus-num">0</div>
                <div class="focus-txt">关注</div>
            </div>
            <div class="focus-fan">
                <div class="focus-num">0</div>
                <div class="focus-txt">好友</div>
            </div>
            <div class="focus-fan">
                <div class="focus-num">0</div>
                <div class="focus-txt">最近播放</div>
            </div>
        </div>
        <!-- 会员中心 -->
       <div class="user-vip">
           <p class="user-vip-item1"><span>
               <i class="fa fa-vimeo-square" aria-hidden="true"></i>
               </span>会员中心</p>
           <p class="user-vip-item2">会员专享多项特权<span>
               <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
               </span></p>
       </div>
       <!-- 图标选择 -->
        <div class="user-sign">
            <div class="user-sign-item">
                <span class="sign-item-icon">
                    <img src="../../assets/images/userinfo/Broadcasticon.png" alt="">
                </span>
                <p class="sign-item-txt">本地</p>
                <span class="sign-item-cout">数量</span>
            </div>
            <div class="user-sign-item">
                <span class="sign-item-icon">
                    <img src="../../assets/images/userinfo/xinaixin.png" alt="">
                </span>
                <p class="sign-item-txt">收藏</p>
                <span class="sign-item-cout">数量</span>
            </div>
            <div class="user-sign-item">
                <span class="sign-item-icon">
                    <img src="../../assets/images/userinfo/tingshu.png" alt="">
                </span>
                <p class="sign-item-txt">听书</p>
                <span class="sign-item-cout">数量</span>
            </div>
            <div class="user-sign-item">
                <span class="sign-item-icon">
                    <img src="../../assets/images/userinfo/yunpan.png" alt="">
                </span>
                <p class="sign-item-txt">云盘</p>
                <span class="sign-item-cout">数量</span>
            </div>
            <div class="user-sign-item">
                <span class="sign-item-icon">
                    <img src="../../assets/images/userinfo/yigou.png" alt="">
                </span>
                <p class="sign-item-txt">已购</p>
                <span class="sign-item-cout">数量</span>
            </div>
            <div class="user-sign-item">
                <span class="sign-item-icon">
                    <img src="../../assets/images/userinfo/zuijin.png" alt="">
                </span>
                <p class="sign-item-txt">最近</p>
                <span class="sign-item-cout">数量</span>
            </div>
        </div>
        
        
    </div>      

</template>

<script>
//消息通知
export default {
    name:'UserInfo',
    data() {
        return {
           
        }
    },
    methods: {
        
        
    }
   
}
</script>

<style lang="less" scoped>

.userInfo{
    background-color:rgba(90,94,111,0.9) ;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-size:16px;
    padding:0 10px;
}
.user-set{
    margin-top: 10px;
    padding:5px;
    display: flex;
    justify-content: space-between;
    .user-fa{
        color: #DB9A9D;
    }
    .user-span{
        margin-left: 20px;
        font-size:20px;
        color:#345;
        width:40px;
    }
    .user-p{
        font-size:16px;
        text-align: left;
        flex:1;
    }
    .user-ico{
        width:30px;
        font-weight: bold;
        font-size:20px;
    }
}
.user-top {
    margin-top: 50px;
    height:70px;
    margin-bottom: 30px;
    background-color:#fff;
    display:flex;
    align-items: center;
    padding:0 5px;
    border-radius: 5px;
    .user-top-img{
        width:90px;
        height:90px;
        background-color:#555 ;
        border-radius: 50%;
        margin-right: 20px;
    }
    .user-top-name {
        flex:1;
        text-align: left;

        .top-name{
            padding:10px 0;

        }
        .top-sex{
            padding:5px 0;
            font-size:14px;
            font-weight:lighter;
        }

    }
}
.user-focus{
    background-color:#fff;
    border-radius: 5px;
    padding:10px 0;
    display: flex;
    justify-content: space-around;
    .focus-fan {
        width:90px;
        height:70px;
        .focus-num {
            font-size:20px;
            padding:10px 0;
            font-weight: bold;
        }
        .focus-txt{
            font-size:14px;
            color:#555;
        }
    
    }
}
.user-vip {
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 15px 10px;
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .user-vip-item1{
        font-size:16px;
        padding-left:30px;
        color:#e2c72eec;
        span {
            display: inline-block;
            margin-right: 5px;
        }
        
    }
    .user-vip-item2{
        font-size:14px;
        span{
            padding-left:10px;
        }
    }
}
.user-sign{
    display:flex;
    flex-wrap:wrap;
    background-color:#fff;
    justify-content: space-around;
    padding:20px 0;
    border-radius: 10px;
    .user-sign-item {
        width:90px;
        height:90px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .sign-item-icon {
            width:40px;
            height:40px;
            img{
                width:100%;
                display: block;
                
            }
        }
        .sign-item-txt {
            font-size:16px;
        }
        .sign-item-cout{
            font-size:12px;
            font-weight: lighter;
        }
    }
}

.tabs{
        width: 100%;
        // margin: 0 auto;
        border:1px solid #999;
    }
    ul{
        list-style: none;
        height: 40px;
    }
    ul li{
        float: left;
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 100px;
    }
    ul li.con{
        background-color: #60C5F1;
    }
    .content{
        height: 300px;
        width: 400px;
        display: none;
    }
    .content.con{
        display: block;
    }
</style>